<template>
  <!-- :show-timeout="150"
  :hide-timeout="100"-->
  <el-submenu :index="actions.path || uniqueId" :popper-class="popperClass">
    <template slot="title">
      <i v-if="actions.icon" :class="`el-icon-${actions.icon}`" />
      <i v-if="actions.iconEle" :class="`el-icon-${actions.iconEle}`" />
      <svg-icon v-if="actions.iconSvg" :icon-class="actions.iconSvg" />
      <!-- style="text-decoration:underline;" -->
      <span slot="title">
        {{ actions.title }}
        <span
          v-if="actions.shortkey"
          style="font-size:12px;"
        >({{ actions.shortkey || '×' }})</span>
      </span>
      <!---->
    </template>
    <template v-for="(child, childIndex) in actions.children">
      <menu-item v-if="child.children === undefined" :key="childIndex" :action="child" />
      <menu-sub v-else :key="childIndex" :actions="child" />
    </template>
  </el-submenu>
</template>

<script>
import { uniqueId as _uniqueId } from 'lodash'
// 组件
import MenuItem from './item'

export default {
  name: 'MenuSub',
  components: {
    MenuItem
  },
  props: {
    actions: {
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    popperClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uniqueId: _uniqueId('d2-menu-empty-')
    }
  }
}
</script>
